<template>
  <div>
       <tabBar>
      <div class="tabBarItem">
      <tabBarItem @itemClick="itemClick" :path="'/home'" :isActive="$route.path=='/home'">
        <template v-slot:img>
          <img src="@/assets/img/1.png" alt="" />
        </template>
        <template v-slot:activeImg>
          <img src="@/assets/img/11.png" alt="" />
        </template>
        <template v-slot:text>
          <div slot="text">首页</div>
        </template>
      </tabBarItem>
    </div>
    <div class="tabBarItem">
      <tabBarItem @itemClick="itemClick" :path="'/cart'" :isActive="$route.path=='/cart'">
        <template v-slot:img>
          <img src="@/assets/img/3.png" alt="" />
        </template>
         <template v-slot:activeImg>
          <img src="@/assets/img/31.png" alt="" />
        </template>
        <template v-slot:text>
          <div slot="text">购物车</div>
        </template>
      </tabBarItem>
    </div>
    <div class="tabBarItem">
      <tabBarItem @itemClick="itemClick" :path="'/user'" :isActive="$route.path=='/user'">
        <template v-slot:img>
          <img src="@/assets/img/4.png" alt="" />
        </template>
         <template v-slot:activeImg>
          <img src="@/assets/img/41.png" alt="" />
        </template>
        <template v-slot:text>
          <div slot="text">我的</div>
        </template>
      </tabBarItem>
    </div>
    
    
    </tabBar>
  </div>
</template>

<script>
import tabBar from '@/components/common/tabBar/tabBar.vue'
import tabBarItem from "@/components/common/tabBar/tabBarItem.vue"
export default {
    name:'mainTabBar',
    components:{
      tabBar,
      tabBarItem
    },
    methods:{
      itemClick(path){
        this.$router.replace(path)
      }
    }
}
</script>

<style scoped>
img{
  height: 18px;
  width: 18px;
  vertical-align: bottom;
}
.tabBarItem{
  width: 60px;
  flex: auto;
  display: flex;
  flex-direction: column;
  align-self: center;
}
</style>